<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" :rules="rulesRul">
          <el-form-item label="正文标题" prop="title">
            <el-input
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.title"
            ></el-input>
          </el-form-item>

          <el-form-item label="简介" prop="introduction">
            <el-input
              type="textarea"
              :rows="2"
              resize="none"
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.introduction"
            ></el-input>
          </el-form-item>

          <el-form-item label="正文" prop="text">
            <el-input
              :disabled="this.fromDisabled"
              v-model="fromData.text"
              type="textarea"
              :rows="7"
              resize="none"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              class="upload-demo"
              action="http://localhost:4000/upDataImgProductService"
              :on-success="onSuccess"
              :on-remove="onremove"
              :limit="1"
              :file-list="fileList"
              :disabled="this.fromDisabled"
              :on-exceed="onExceed"
              :before-upload="beforeUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过10MB
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <div slot="outerFooter" v-if="!this.fromDisabled">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)"
          >保存</el-button
        >
      </div>
      <div slot="outerFooter" v-else>
        <el-button @click="($event) => buttonClickHandler(0)">关闭</el-button>
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import DialogTemplate from "@/components/DialogTemplate.vue";
import UploadTemplate from "@/components/UploadTemplate.vue";
import { dressingByScreening } from "@/components/config/index";
import { addpageMessage, editPageMessage } from "@/api/pageMessage";
import { algorithm } from "@/components/config/index";
import _ from 'lodash'
export default {
  components: {
    DialogTemplate,
    UploadTemplate,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "默认为测试标题",
        outWidth: "50%",
        destroyOnClose: true,
        top: "40px",
      },
      fromData: {
        title: "",
        introduction: "",
        text: "",
        imgsrc:[]
      },
      rulesRul: {
        title: [
          { required: true, message: "正文标题不能为空", trigger: "blur" },
        ],
        introduction: [
          { required: true, message: "简介不能为空", trigger: "blur" },
        ],
        text: [{ required: true, message: "正文不能为空", trigger: "blur" }],
      },
      fromDisabled: true,
      titleType: "",
      articleid: "",
      fileList:[]

    };
  },

  methods: {
    onExceed() {
      this.$notify.error({ title: "提示", message: "只能上传一张图片" });
    },
    //上传成功的回调
    onSuccess(response, file, fileLis){
      this.fromData.imgsrc = []
      this.fromData.imgsrc.push(response.data)
      this.$notify.success({ title: "提示", message: "图片上传成功" });
    },
    //删除图片的回调
    onremove(){
      if(this.fromDisabled) return
      this.fromData.imgsrc = []
    },
    //上传前的回调函数
    beforeUpload(file){
      if(file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/jpg'){
        this.$notify.warning({ title: "提示", message: "请上传指定格式的图片文件" });
        return false
      }
      const is10M = file.size / 1024 / 1024 < 10;
      if (!is10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false
      }
      return true
    },
    //开启弹框
    handleOpen(val, titleType) {
      this.fileList =  _.cloneDeep(val.imgsrc)
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
      this.dialogData.title = "产品服务 -- " + titleType;
      //2.打开弹框后 判断里面的数据是否可以编辑
      this.titleType = titleType;
      if (titleType == "编辑" || titleType == "新增") {
        this.fromDisabled = false;
        if(titleType == "新增"){
          this.fromData.imgsrc = []
          this.articleid =  algorithm()
        }else if(titleType == "编辑"){
          this.fromData.imgsrc = _.cloneDeep(val.imgsrc)
          this.articleid =  val.articleid
        }
      } else {
        this.fromDisabled = true;
      }
      //3.为页面赋初始值
      if (val)
        this.fromData = dressingByScreening({ ...this.fromData }, { ...val });
    },
    //弹出框关闭的回调
    closeHanler() {
      this.fileList = []
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        this.$refs.formRef.validate((vaild) => {
          if (vaild) {
            if(this.fromData.imgsrc.length == 0){
              this.$notify.error({ title: "提示", message: "请先上传图片" });
              return
            }else{
              this.fromData.type = 0;
              this.fromData.articleid = this.articleid;
              if (this.titleType == "新增") this.addDataFunction();
              else if (this.titleType == "编辑") this.editDataFunction();
            }
          }
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },

    //新增数据
    addDataFunction() {
      addpageMessage(this.fromData).then((res) => {
        if (res.data.state == "200") {
          this.$refs.DialogTemplateRef?.closeDialogOne();
          this.$notify.success({ title: "提示", message: "添加成功" });
          this.$emit("resData", 1);
        } else this.$notify.error({ title: "提示", message: res.data.message });
      });
    },
    //编辑数据
    editDataFunction() {
      editPageMessage(this.fromData).then((res) => {
        if (res.data.state == 400)
          this.$notify.error({ title: "提示", message: res.data.message });
        else if (!res.data.acknowledged)
          this.$notify.error({ title: "提示", message: "编辑失败" });
        else {
          this.$notify.success({ title: "提示", message: "数据编辑成功" });
          this.$refs.DialogTemplateRef?.closeDialogOne();
          this.$emit("resData", "编辑");
        }
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
